<template>
  <view class="w_750 bg_F5F5F5 flex flex-column align-center pageHeight">
    <s-header-title ref="headerTitle" isDisplayBack title="家庭列表" is-fixed background="#FFFFFF"
                    @getPageHeight="getPageHeight" z-index="9999"></s-header-title>
    <view :style="{height:`${page.headerHeight}px`}"></view>
    <view class="fs_28 color_9F9F9F fw_500 hW_50 flex align-center justify-center">可长按家庭上下拖动进行排序</view>
    <scroll-view :style="{height:`calc(100vh - ${page.headerHeight}px - 50rpx)`}" :scroll-y="true">
      <l-drag :list="family.list"
              :column="1"
              gridHeight="390rpx"
              longpress
              @change="familyChange($event)"
              @touchStart="familytTouchStart($event)"
      >
        <template #grid="{active, index, content}">
          <view class="flex flex-column align-center">
<!--            <family-management :info="content" :index="index + 1"-->
<!--                               :length="family.list.length"-->
<!--                               v-if="!!isLogin && family.list.length > 0"-->
<!--            ></family-management>-->
            <view class="genealogy_bg wh_702 hW_374 mt_16 flex"
                  style="border-radius: 21rpx;overflow:hidden;position: relative;"
                  :style="setBackground(index)"
                  @click.stop="goToPath(content)"
            >
              <view
                style="position: absolute;background: rgba(255,255,255,0.5);width: 100%;height: 100%;backdrop-filter: blur(15rpx);"></view>
              <view class="flex flex-column align-center flex-sub" style="position: absolute;width: 100%;height: 100%;">
                <view class="z_1 mt_30 flex justify-between"
                      style="width: 100%;"
                >
                  <view class="flex flex-column ml_24">
                    <view class="fs_38 color_292929 fw_500">{{ content.name }}</view>
                    <view class="fs_22 fw_400 color_292929 mt_15">家庭号: {{ content.family_id }}</view>
                    <view class="fs_22 fw_400 color_292929 mt_15">发起人: {{ content.create_user_name }}</view>
                    <view class="fs_22 fw_400 color_292929 mt_15">
                      创建时间：{{ dayjs(content.createtime * 1000).format('YYYY年MM月DD日') }}
                    </view>
                  </view>
                  <view class="flex flex-column align-end mr_24">
                    <view class="flex align-center">
                      <!-- #ifndef H5 -->
                      <view class="wh_100 hW_49 fs_25 fw_500 flex align-center justify-center"
                            style="background: rgba(255,255,255,0.8);border-radius: 13rpx;color: #000000;"
                      >
                        扫一扫
                      </view>
                      <!-- #endif -->
                      <view class="wh_54 hW_49 flex align-center justify-center ml_30"
                            style="border-radius: 13rpx;background: rgba(255,255,255,0.8)"
                            @click.stop="administration(content,true)"
                      >
                        <image :src="`${IMG_URL}/genealogy/genealogy_code.png`"
                               class="wh_31 hW_31"
                        ></image>
                      </view>
                    </view>
                    <view class="fs_34 fw_500 color_292929 mt_38" @click.stop="administration(content)">
                      设置
                    </view>
                  </view>
                </view>
                <view style="width: 100%;" class="ml_50 mt_15">
                  <view class="wh_145 hW_49 z_10 fs_28 fw_500 flex align-center justify-center"
                        style="background: rgba(255,255,255,0.6);border-radius: 29rpx;color: #66483D;"
                  >
                    进入家庭
                  </view>
                </view>
                <view class="flex align-center"
                      style="position: absolute;left: 24rpx;bottom: 22rpx"
                >
                  <view class="fs_24 fw_500 mr_16 color_292929">
                    照片: {{ content.images_count }}张
                  </view>
                  <view class="fs_24 fw_500 mr_16 color_292929">
                    圈子: {{ content.circle_count }}条
                  </view>
                  <view class="fs_24 fw_500 mr_16 color_292929">
                    生日: {{ content.memory_birthday_count }}人
                  </view>
                  <view class="fs_24 fw_500 color_292929">
                    纪念日: {{ content.memory_memory_count }}个
                  </view>
                </view>
              </view>
              <view style="position: absolute;z-index:2">
                <image :src="`${IMG_URL}/family/family_background.png`"
                       v-if="content.cover_lsit.length <= 0"
                       class="wh_280 hW_186"
                       style="position: absolute;top: 97rpx;left: 321rpx;border-radius: 20rpx;overflow: hidden;z-index:-1"
                ></image>
                <swiper class="wh_280 hW_186"
                        v-else
                        style="position: absolute;top: 97rpx;left: 321rpx;border-radius: 20rpx;overflow: hidden;"
                        autoplay
                        circular
                        indicator-color="rgba(255,255,255,0.1)"
                        indicator-active-color="#fff"
                        :interval="3000"
                        :duration="500"
                        @change="urlChange($event,index)"
                >
                  <block v-for="(item,index) in content.cover_lsit" :key="index">
                    <swiper-item>
                      <navigator :url="item.url">
                        <image :src="item" class="wh_290 hW_196" mode="aspectFill" />
                      </navigator>
                    </swiper-item>
                  </block>
                </swiper>
              </view>
            </view>
          </view>
        </template>
      </l-drag>
      <view class="hW_200">
      </view>
    </scroll-view>
    <view class="anniversaryContent_bottomButtons flex align-center" style="justify-content: space-evenly">
      <view class="anniversaryContent_bottomButton flex align-center justify-center" @click.stop="openAddFamilyPopup">
        <text class="anniversaryContent_bottomButton_text">加入亲友的家庭</text>
      </view>
      <view class="anniversaryContent_bottomButton flex align-center justify-center" @click.stop="openFamilyPopup">
        <text class="anniversaryContent_bottomButton_text">新建家庭</text>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { computed, reactive } from 'vue';
  import HeaderTitle from '@/pages/family/components/headerTitle.vue';
  import { onLoad, onShow } from '@dcloudio/uni-app';
  import sheep from '@/sheep';
  import FamilyManagement from '@/pages/message/components/familyManagement.vue';
  import { showAuthModal } from '@/sheep/hooks/useModal';
  import LDrag from '@/uni_modules/lime-drag/components/l-drag/l-drag.vue';
  import dayjs from 'dayjs';

  // 页面配置信息
  const page = reactive({
    headerHeight: 0,
  });

  const IMG_URL = computed(() => sheep.$store('AI').sq_image_path);

  // 页面数据
  const family = reactive({
    // 家庭信息
    info: {},
    // 家庭列表
    list: [],
    selectFamily: {},
  });

  // 是否登录
  const isLogin = computed(() => sheep.$store('user').isLogin);
  const setBackground = (index) => {
    // if (family.list[index].cover_lsit.length <= 0) {
      return {
        background: `url(${IMG_URL}/family/family_background.png) no-repeat`,
      };
    // }
    // return {
    //   background: `url(${family.list[index].cover_lsit[family.list[index].urlIndex]})  no-repeat`,
    //   'background-size': '100%',
    // };
  };

  onShow(async () => {
    // 获取家庭信息以及列表
    await getFamilyList();
  });

  // 获取头部高度
  function getPageHeight(number) {
    page.headerHeight = number;
  }

  const urlChange = (e, index) => {
    family.list[index].urlIndex = e.detail.current;
  };

  // 获取家庭列表以及信息
  async function getFamilyList() {
    let { data } = await sheep.$api.family.getUserFamily({});
    data.familys.forEach(item=>{
      item.urlIndex = 0
    })
    family.list = data.familys;
  }

  // 新建家庭
  function openFamilyPopup() {
    if (!isLogin.value) {
      showAuthModal();
      return;
    }
    sheep.$router.go('/pages/family/foundFamily');
  }

  function openAddFamilyPopup() {
    sheep.$router.go('/pages/familyPage/joinFamily');
  }

  async function familyChange(e) {
    let arr = [];
    e.forEach(item => {
      arr.push(item.content.id);
    });
    const { data } = await sheep.$api.family.updateFamilySort({
      family_id: page.selectFamily.id,
      ids: arr.join(','),
    });
  }

  function familytTouchStart(e) {
    page.selectFamily = e;
  }

  function goToPath(info = {}) {
    if (!isLogin.value) {
      showAuthModal();
      return;
    }
    sheep.$router.go('/pages/family/familyDetails', {
      family_id: info.id,
      code: info.family_id,
      is_own: info.is_owner,
    });
  }

  function administration(info = {}, is_flag = false) {
    if (!state.isLongPress) {
      return;
    }
    if (!isLogin.value) {
      showAuthModal();
      return;
    }
    sheep.$router.go('/pages/familyPage/familyEdit', {
      family_id: info.id,
      code: info.family_id,
      is_own: info.is_my,
      is_flag: is_flag,
    });
  }
</script>


<style scoped lang="scss">
  .anniversaryContent_bottomButtons {
    position: fixed;
    bottom: 40rpx;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    width: 750rpx;
  }

  .anniversaryContent_bottomButton {
    width: 312rpx;
    height: 70rpx;
    background: rgba(255, 66, 6, 0.7);
    border-radius: 50rpx 50rpx 50rpx 50rpx;
    //position: fixed;
    //bottom: 40rpx;
    //left: 50%;
    //transform: translateX(-50%);
    //z-index: 10;

    .anniversaryContent_bottomButton_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 30rpx;
      color: #FFFFFF;
    }
  }

  .genealogy_bg {
    background: url($uni-bg-url-sq + '/family/family_background.png') no-repeat;
    background-size: 100% 100%;
    backdrop-filter: blur(2px);
  }

  .genealogy_content {
    background: url($uni-bg-url-sq + '/genealogy/genealogy_shu.png') 329rpx 110rpx no-repeat;
    background-size: 254rpx 213rpx;
    height: 100%;
  }
</style>
